<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="songListForm" rendered="#{userSession.connected}">
                <p:contextMenu id="songListContextMenu" for="songs" style="width: 280px;">
                    <p:menuitem value="Informations" ajax="true" update=":songDetailForm:songDetail" icon="ui-icon-search" oncomplete="songDetailDialog.show()"/>
                    <p:menuitem value="Ajouter dans playlist" ajax="true" update=":addToPlaylistForm:playlist_edit_display" icon="ui-icon-note" oncomplete="playlistDialog.show()"/>
                    <p:menuitem value="Ajouter dans playlist courante" disabled="#{songList.song eq null}" ajax="true" icon="ui-icon-plus" oncomplete="addSongToPlayList(#{songList.song.id}, '#{songList.addSlashes(songList.song.filePath)}', '#{songList.addSlashes(songList.song.title)}', '#{songList.escapeSlashes(songList.song.coverImage)}');"/>
                    <p:menuitem value="Ajouter dans playlist courante et lire" ajax="true" icon="ui-icon-plus" oncomplete="addSongToPlayListAndPlay(#{songList.song.id}, '#{songList.addSlashes(songList.song.filePath)}', '#{songList.addSlashes(songList.song.title)}', '#{songList.escapeSlashes(songList.song.coverImage)}');"/>
                </p:contextMenu>
                <h1><h:outputText value="Tous les morceaux"/></h1>
                <p:commandButton icon="ui-icon-play" onclick="togglePlay();" value="Lire"/>
                <!--<p:commandButton icon="ui-icon-disk" onclick="savePlaylist();" value="Enregistrer playlist courante"/> -->
                <p:commandButton icon="ui-icon-refresh" onclick="reinit();" value="Réinitialiser lecteur"/>
                <p:dataTable id="songs" value="#{songList.lazyMusicModel}" var="song" paginator="true" rows="50" widgetVar="songsTable"
                             emptyMessage="Aucune musique trouvée !" 
                             paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} Aller à la page {JumpToPageDropdown}" 
                             rowsPerPageTemplate="50, 100, 125, 150"
                             rowKey="#{song.id}" selection="#{songList.song}" selectionMode="single">
                    <p:ajax event="rowSelect" update=":songListForm:songListContextMenu" />
                    <p:ajax event="rowUnselect" update=":songListForm:songListContextMenu" />
                    <f:facet name="header">  
                        <p:outputPanel>  
                            <h:outputText value="Recherche sur toutes les colonnes : " />  
                            <p:inputText id="globalFilter" onkeyup="songsTable.filter()" style="width:150px" />  
                        </p:outputPanel>  
                    </f:facet>
                    <p:column>
                        <p:commandButton icon="ui-icon-play" value="Lire" ajax="true" process="@form" update="@form"  oncomplete="addSongToPlayListAndPlay(#{song.id}, '#{songList.addSlashes(song.filePath)}', '#{songList.addSlashes(song.title)}', '#{songList.escapeSlashes(songList.song.coverImage)}');"/>
                    </p:column>
                    <p:column sortBy="#{song.title}" filterBy="#{song.title}" style="width: 35%;">
                        <f:facet name="header">
                            <h:outputText value="Titre"/><br/>
                        </f:facet>
                        <h:outputText value="#{song.title}"/>
                    </p:column>
                    <p:column sortBy="#{song.artist}" filterBy="#{song.artist.artistName}" style="width: 28%;">
                        <f:facet name="header">
                            <h:outputText value="Artiste"/><br/>
                        </f:facet>
                        <h:outputText value="#{song.artist.artistName}"/>
                    </p:column>
                    <p:column sortBy="#{song.album}" filterBy="#{song.album.title}" style="width: 35%;">
                        <f:facet name="header">
                            <h:outputText value="Album"/><br/>
                        </f:facet>
                        <h:outputText value="#{song.album.title}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Durée"/><br/>
                        </f:facet>
                        <h:outputText value="#{song.totalTimeStr}"/>
                    </p:column>
                    <f:facet name="footer">  
                        Total : #{fn:length(songList.songs)} titres.  
                    </f:facet> 
                </p:dataTable>
            </h:form>
            <h:form id="addToPlaylistForm">
                <p:dialog header="Ajouter dans une playlist" widgetVar="playlistDialog" resizable="false"  
                          width="400" showEffect="clip" hideEffect="fold" id="dialog">  
                    <ui:fragment rendered="#{userSession.user.playlists.size() != 0}">
                        <h:panelGrid id="playlist_edit_display" columns="2" cellpadding="4">  
                            <h:outputLabel value="Playlist" for="playlistSelect"/>
                            <h:selectOneMenu id="playlistSelect" converter="#{myPlaylist.playlistConverter}" value="#{songList.playlist}" 
                                             required="true" requiredMessage="Veuillez sélectionner un playlist">
                                <f:selectItems value="#{userSession.user.playlists}" var="item" itemLabel="#{item.title}" itemValue="#{item}" />
                            </h:selectOneMenu>
                            <h:outputText value=""/>  
                            <h:commandButton value="Confirmer" action="#{songList.addToPlayList()}"/>
                        </h:panelGrid>  
                    </ui:fragment>
                    <ui:fragment rendered="#{userSession.user.playlists.size() == 0}">
                        Vous n'avez pas encore créé de playlist.
                    </ui:fragment>
                </p:dialog>  
            </h:form>
            <h:form id="songDetailForm">
                <p:dialog header="#{songList.song.title}" widgetVar="songDetailDialog" resizable="false"  
                          width="800" height="400" showEffect="clip" hideEffect="fold" id="songDetail">  
                    <h:graphicImage width="300" library="images" value="#{songList.song.coverImage}" />
                    <br/>
                    <p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="addSongToPlayList(#{songList.song.id}, '#{songList.addSlashes(songList.song.filePath)}', '#{songList.addSlashes(songList.song.title)}', '#{songList.escapeSlashes(songList.song.coverImage)}');"/>
                    <br/><br/>
                    <table id="playlistDescTable" style="width:90%;">
                        <thead>
                            <th>Titre</th>
                            <th>Artiste</th>
                            <th>Album</th>
                            <th>Genre</th>
                            <th>Durée</th>
                            <th>Sortie</th>
                            <th>Joué</th>
                        </thead>
                        <tr>
                            <td>
                                <h:outputText value="#{songList.song.title}"/>
                            </td>
                            <td><h:outputText value="#{songList.song.artist.artistName}" /></td>
                            <td><h:outputText value="#{songList.song.album.title}" /></td>
                            <td><h:outputText value="#{songList.song.genre.label}" /></td>
                            <td><h:outputText value="#{songList.song.totalTimeStr}" /></td>
                            <td>
                                <h:outputText value="#{songList.song.releaseDate}">
                                    <f:convertDateTime pattern="yyyy" />
                                </h:outputText>
                            </td>
                            <td><h:outputText value="#{songList.song.nbTimesPlayed} fois" /></td>
                        </tr>
                    </table>
                </p:dialog>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
